<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>名片</title>
	<style>
		figure{
			width: 300px;
			margin: 50px auto;
			box-shadow: 1px 1px 1px 1px #ccc;
			opacity: .7;
		}
		figure img{
			width: 100%;
			vertical-align: bottom;
		}
		figure:first-child div{
			border: 1px solid #ccc;
			padding-left: 10px;
		}
		figure:first-child div p{
			overflow: hidden;
    		text-overflow: ellipsis;
    		white-space: nowrap;
		}
		figure:last-child{
			text-align: center;
		}
		figure:last-child div{
			border: 1px solid #ccc;
			padding: 20px;
		}
	</style>
</head>
<body>
	<figure>
		<img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/4b0637bf-eb96-4f3e-97f3-203a9b0b1e0c" alt="我的头像">
		<div>
			<h2>杨雨蒙</h2>
			<p>前端工程师一枚，爱生活，爱和平，爱热闹</p>
		</div>
	</figure>
	
	<figure>
		<img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="我的头像">
		<div>
			<p>风景如画</p>
		</div>
		
	</figure>
</body>
</html>
